
<template>
  <div id="cesium-viewer">
    <slot />
  </div>
</template>

<script setup>
import * as Cesium from 'cesium'
import { onMounted, markRaw } from 'vue'
import { useMapData } from '@/store'
import { initViewer, setScene, loadTilesets } from '@/cesiumTools/sceneManager'

//初始化cesium实例
Cesium.Ion.defaultAccessToken = import.meta.env.VITE_CESIUM_TOKEN

const dataStore = useMapData()
onMounted(async () => {
  const viewer = initViewer('cesium-viewer')
  setScene(viewer)
  // 可以使用pinia来管理viewer地图对象，只需要将其标记为非响应式即可
  dataStore.setViewer(markRaw(viewer))
  const modelUrls = [
    {
      url: 'http://localhost:8888/model/tileset.json',
      options: {},
    },
  ]
  // 加载多个3dtiles
  await loadTilesets(viewer, modelUrls, (tilesets) => {
    dataStore.setTileset(tilesets[0])
    viewer.zoomTo(tilesets[0])
  })
})
</script>
<style>
#cesium-viewer {
  width: 100%;
  height: 100%;
  pointer-events: all;
}
</style>
